<template>
  <nav class="tab-nav">
    <div @click="changeActive(0)">
      <svg-icon
        icon-class="home"
        class="tab-icon"
        :class="{ 'tab-icon-active': activeIndex == 0 }"
      ></svg-icon>
    </div>
    <div @click="changeActive(1)">
      <svg-icon
        icon-class="statistic"
        class="tab-icon"
        :class="{ 'tab-icon-active': activeIndex == 1 }"
      ></svg-icon>
    </div>
    <div @click="changeActive(2)">
      <svg-icon
        icon-class="setting"
        class="tab-icon"
        :class="{ 'tab-icon-active': activeIndex == 2 }"
      ></svg-icon>
    </div>
  </nav>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const activeIndex = ref(0);
const changeActive: (index: number) => void = function (index: number) {
  activeIndex.value = index;
};
</script>

<style>
.tab-nav {
  display: flex;
  justify-content: space-around;
  background-color: rgb(250, 250, 250);
  padding: 1vh 0;
  border-top: 1px solid rgba(220, 220, 220, 0.39);
}
.tab-icon {
  color: rgba(100, 100, 100, 0.5);
  width: 10vw;
  height: 10vw;
}
.tab-icon-active {
  color: rgb(66, 66, 66);
}
</style>
